<template>
  <view style="display: flex;flex-direction: column;height: 100%">
    <u-navbar title="" placeholder autoBack titleStyle="color:white"></u-navbar>
    <view class="logo">
      <image :src="BaseImgUrl + '/images/logo_wechat.png'" style="border-radius: 40rpx;"></image>
    </view>
    <view class="input-box">
      <view class="phone-input">
        <u-input
            class="inputWidth"
            v-model="user_phone"
            border="none"
            type="number"
            :customStyle="{padding: '13rpx 30rpx'}"
            placeholderStyle="divcolor"
            placeholder="请输入手机号"/>
      </view>
      <view class="phone-input">
        <u-input style="width: 70%;" v-model="user_code" border="none"
                 type="number"
                 placeholderStyle="divcolor"
                 :customStyle="{padding: '13rpx 30rpx'}"
                 placeholder="请输验证码"/>
        <view v-if="!verify" class="code-brn" @click="getCode">获取图形验证码</view>
        <view v-if="verify" class="code-brn">{{ codeText }}</view>
      </view>
      <u-code unique-key="page-a" ref="uCodeRef" seconds="60" @end="end" @start="start" @change="codeChange"></u-code>
    </view>
    <view class="login-btn" @click="login">
      登录
    </view>
    <view style="flex: 1"></view>
    <view class="protocol-content">
      <view class="protocol">
        <view class="dianji" @tap="check_icon('check')">
          <image v-if="check_on === 0" class="check_icon"
                 :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
          <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
        </view>
        <view>点击同意《
          <text @click.stop="yhxy">用户协议</text>
          》和《
          <text @click.stop="ysxy">隐私协议</text>
          》
        </view>
      </view>
      <!-- #ifdef APP-PLUS-->
      <view class="protocol">
        <view class="dianji" @tap="check_icon('cid')">
          <image v-if="cid_on === 0" class="check_icon"
                 :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
          <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
        </view>
        <view style="line-height: 60rpx;">授权获取用户设备权限，用于<text style="color: #2764ff;">推送消息</text></view>
      </view>
      <!-- #endif -->
    </view>

  </view>
  <u-safe-bottom></u-safe-bottom>
  <u-popup :show="show" mode="center" :round="10" @close="show = false">
    <view class="shadow_box">
      <view class="img_code">图形验证码：点击图片刷新</view>
      <view class="phone-input">
        <u-input style="width: 70%;" v-model="verify" type="number" border="none" placeholderStyle="color: #b8b8b8"
                 placeholder="请输图形验证码"/>
        <view class="code-brn2">
          <image @click="Getverify" :src="verifyCodeImg"></image>
        </view>
      </view>
      <view>
        <u-button type="primary" shape="square" @click="getCode">确定</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import {ref} from "vue";
import {bindDeviceCidAPI, getLoginCode, getNewsLoginCode, loginForSmsCode} from "../../services/login";
import {BaseImgUrl, deviceInfo} from "../../utils/lshttp";
import {getImageCodeAPI, getUserInfoAPI} from "../../services/me";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";

const userInfoStore = useUserInfoStore()
const commonInfoStore = useCommonInfoStore()
const user_phone = ref('')
const user_code = ref()
const verify = ref()
const codeText = ref("获取手机验证码")
const verifyCodeImg = ref()
const img = ref()
const uCodeRef = ref(null)
const show = ref(false)

const end = () => {
  // uni.$u.toast('倒计时结束');
};

const start = () => {
  // uni.$u.toast('倒计时开始');
};
//用户协议
const yhxy = () => {
  uni.navigateTo({
    url: '../login/yhxy'
  })
}
//隐私协议
const ysxy = () => {
  uni.navigateTo({
    url: '../login/ysxy'
  })
}
const check_on = ref(0)
const cid_on = ref(0) // 是否绑定cid
const check_icon = (type) => {
  if (type == 'check'){
    check_on.value === 1 ? check_on.value = 0 : check_on.value = 1
  } else if (type == 'cid'){
    cid_on.value === 1 ? cid_on.value = 0 : cid_on.value = 1
  }
}
const login = () => {
  if (check_on.value === 0) {
    uni.showToast({
      title: '请勾选同意协议',
      icon: 'none',
      duration: 1500
    });
  }
  // #ifdef APP-PLUS
  else if (cid_on.value === 0){
    uni.showToast({
      title: '请勾选授权获取用户设备权限',
      icon: 'none',
      duration: 1500
    });
  }
  // #endif
  else {
    phone_login()
  }
}
// 登录添加访问记录
const device_info = {
  device_id: deviceInfo.deviceId,
  platform_type: deviceInfo.platform,
  uniPlatform_type: deviceInfo.uniPlatform,
  deviceBrand: deviceInfo.deviceBrand,
  safeArea: deviceInfo.safeArea,
}
const phone_login = async () => {
  //判断登录方式
  if (!user_phone.value) {
    await uni.showToast({
      title: '手机号不能为空',
      icon: 'none',
      duration: 1500
    });
    return false;
  } else if (!user_code.value) {
    await uni.showToast({
      title: '验证码不能为空',
      icon: 'none',
      duration: 1500
    });
    return false;
  } else {
    const res = await loginForSmsCode(user_phone.value, user_code.value, device_info, commonInfoStore.invite_link_id)
    if(res){
      plus.push.getClientInfoAsync(async (info) => {
        const cid = info["clientid"];
        console.log("cid=", cid)
        await bindDeviceCidAPI(cid)
      }, function (err) {
        uni.showToast({
          title: '登录失败',
          icon: 'none',
          duration: 1500,
          mask: true,
        })
      });
      /* plus.push.getClientInfoAsync(async (info) => {
        const cid = info["clientid"];
        console.log("cid=", cid)
        await bindDeviceCidAPI(cid)
      }); */
    }
    uni.showToast({title: res.msg}, 2000)
    userInfoStore.setProfile(res.result)
    const resUser = await getUserInfoAPI()
    userInfoStore.setUserInfo(resUser.result)
    await uni.navigateBack({
      delta: 2
    })
  }
}
const getCode = async () => {
  if (!user_phone.value) {
    await uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!verify.value) {
    if (!(/^1[3456789]\d{9}$/.test(user_phone.value))) {
      await uni.showToast({
        title: '手机号有误，请重填',
        icon: 'none'
      })
      return
    }
    if (verify.value) {

    }
    show.value = true
    await Getverify()
  } else {
    console.log("uCodeRef.canGetCode", uCodeRef.value.canGetCode)
    // 关闭验证码弹窗
    show.value = false
    if (uCodeRef.value.canGetCode) {
      // 向后端请求验证码
      await uni.showLoading({
        title: '正在获取验证码'
      })
      const res = await getNewsLoginCode(user_phone.value, verify.value)
      if(res.result.isSuccess){
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      }else{
        await uni.showToast({title: res.msg, icon: "none"})
        verify.value = ""
      }

    } else {
      await uni.showToast({
        title: "倒计时结束后再发送",
        icon: 'none'
      })
    }
  }
}
const Getverify = async () => {
  const res = await getImageCodeAPI({
    tel: user_phone.value || '',
    type: 'base64'
  })
  verifyCodeImg.value = res.result.base64
}
const codeChange = (text) => {
  codeText.value = text;
}
</script>

<style>
page {
  background-color: #FFFFFF;
  height: 100%;
  position: relative;
}
</style>
<style scoped lang="scss">
page {
  background-color: #fff;
}

.logo {
  margin-top: 68rpx;
  text-align: center;
  margin-bottom: 70rpx;

  image {
    width: 175rpx;
    height: 175rpx;
  }
}

.logoh5 {
  position: absolute;
  top: 26%;
  text-align: center;
  margin-bottom: 38px;
  left: 0;
  right: 0;

  image {
    width: 240rpx;
    height: 240rpx;
  }
}

.shadow_box {
  box-sizing: border-box;
  padding: 60rpx 40rpx;

  .img_code {
    font-size: 28rpx;
    font-weight: bold;
  }
}

.phone-input {
  background-color: #F7F8FA;
  margin: 30rpx 0;
  padding: 10rpx 30rpx;
  border-radius: 200rpx;
  border: 1px solid #F7F8FA;
  display: flex;
  color: #666666;
  align-items: center;

  .inputWidth {
    width: 100%;
  }

  //box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.05);
  u-button {
    margin-left: auto;
  }
}

.input-box {
  width: 80%;
  margin: 0 auto;


}

.divcolor {
  color: #666666;
}

.code-brn {
  width: 210rpx;
  color: #007AFF;
  padding: 10rpx 4rpx;
  text-align: center;
  font-size: 26rpx;

  image {
    width: 200rpx;
  }
}

.code-brn2 {
  width: 200rpx;
  height: 70rpx;
  color: #007AFF;
  padding: 0 4rpx;
  text-align: center;

  image {
    width: 200rpx;
    height: 70rpx;
  }
}

.h5wxlogin-wrap {
  position: absolute;
  height: 66px;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  color: #FFFFFF;
  border-radius: 100px;
  width: 80%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 44%;
  justify-content: center;

  image {
    z-index: 1;
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
  }
}

.qitadengl {
  position: absolute;
  top: 58%;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  color: #999999;
}

.login-btn {
  height: 100rpx;
  border-radius: 200rpx;
  background-image: linear-gradient(90deg, #FC754A, #FEBC5B);
  align-self: center;
  width: 600rpx;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 100rpx;
  color: #FFFFFF;
  margin: 70rpx auto 20rpx;
  box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.05);
}

.login-wrap {
  position: relative;
  height: 120rpx;
  color: #999999;
  margin-top: 40rpx;

  .MPlogin-btn {
    height: 100rpx;
    width: 100rpx !important;
    border-radius: 200rpx;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
  }

  image {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    width: 110rpx;
    height: 110rpx;
  }

  uni-button:after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0 solid rgba(0, 0, 0, .2) !important;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
  }
}

.disanf {
  /* #ifdef H5 */
  padding-top: 110rpx;
  /* #endif */

  /* #ifdef MP-WEIXIN || APP-PLUS */
  padding-top: 80rpx;
  /* #endif */

  text-align: center;
  color: #999999;

  image {
    width: 102rpx;
    height: 102rpx;
  }
}

.xieyi {
  display: flex;
  align-items: center;
}

.protocol span {
  color: #2764FF;
}

.check_icon {
  width: 34rpx;
  height: 34rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}


.change_login {
  justify-content: center;
  color: #666666;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  width: 60%;
  margin: 40rpx auto 0;

  .zhucetitle {
    text-align: center;
  }

  //view:nth-child(1){
  //	border-right: 1px solid #ccc;
  //	margin-right: 10rpx;
  //}
}

.bigBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10% 15px 0;
}

.phone_login {
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  height: auto;
  line-height: 40px;
  color: #555555;
  text-align: center;
}

.input {
  width: 100%;
  height: 45px;
  margin-bottom: 25px;
  border-radius: 6px;
  margin-top: 30px;
}

.input input {
  box-sizing: border-box;
  padding-left: 10px;
  line-height: 45px;
  border-radius: 4px;
  height: 100%;
  border: 1px solid #cccccc;
}

.set_code {
  width: 100%;
}

.set_code input {
  width: 60%;
  float: left;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.set_code view {
  display: inline-block;
  width: 40%;
  float: left;
  line-height: 45px;
  background-color: #FB9360;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 0 6px 6px 0
}

.login {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: white;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  margin-top: 20px;
  border-radius: 30px;
}

.dianji {
  padding: 8rpx;
}

.protocol text {
  color: #2764FF;
}
.protocol-content {
  position: fixed;
  bottom: 20rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  .protocol {
    width: 78%;
    color: #999;
    // padding: 0 0 10px 0;
    margin: 20rpx auto 10px;
    display: flex;
    font-size: 24rpx;
    justify-content: left;
    align-items: center;

  }
}


</style>
